<template>
  <div class="page-container">
    <h2 class="section-title">MockJS 测试页面</h2>
    
    <div class="test-section">
      <h3>用户接口测试</h3>
      <button @click="testUserLogin" class="test-btn">测试用户登录</button>
      <button @click="testUserInfo" class="test-btn">测试获取用户信息</button>
      <button @click="testUserRegister" class="test-btn">测试用户注册</button>
    </div>

    <div class="test-section">
      <h3>商品接口测试</h3>
      <button @click="testProducts" class="test-btn">测试获取商品列表</button>
      <button @click="testCategories" class="test-btn">测试获取分类</button>
      <button @click="testBanners" class="test-btn">测试获取轮播图</button>
    </div>

    <div class="test-section">
      <h3>购物车接口测试</h3>
      <button @click="testCart" class="test-btn">测试获取购物车</button>
      <button @click="testAddToCart" class="test-btn">测试添加到购物车</button>
    </div>

    <div class="test-section">
      <h3>订单接口测试</h3>
      <button @click="testOrders" class="test-btn">测试获取订单列表</button>
      <button @click="testCreateOrder" class="test-btn">测试创建订单</button>
    </div>

    <div class="test-section">
      <h3>搜索接口测试</h3>
      <button @click="testSearch" class="test-btn">测试搜索商品</button>
      <button @click="testSearchKeywords" class="test-btn">测试获取搜索关键词</button>
    </div>

    <div class="results-section">
      <h3>测试结果</h3>
      <pre class="result-display">{{ testResults }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { login, register, getUserInfo } from '@/api/user'
import { getProducts, getCategories, getBanners } from '@/api/product'
import { getCart, addToCart } from '@/api/cart'

const testResults = ref('点击按钮开始测试...')

// 测试用户登录
const testUserLogin = async () => {
  try {
    const result = await login({ phone: '13800138000', password: '123456' })
    testResults.value = `用户登录测试成功:\n${JSON.stringify(result, null, 2)}`
  } catch (error) {
    testResults.value = `用户登录测试失败:\n${error.message}`
  }
}

// 测试获取用户信息
const testUserInfo = async () => {
  try {
    const result = await getUserInfo()
    testResults.value = `获取用户信息测试成功:\n${JSON.stringify(result, null, 2)}`
  } catch (error) {
    testResults.value = `获取用户信息测试失败:\n${error.message}`
  }
}

// 测试用户注册
const testUserRegister = async () => {
  try {
    const result = await register({ phone: '13800138000', password: '123456', code: '1234' })
    testResults.value = `用户注册测试成功:\n${JSON.stringify(result, null, 2)}`
  } catch (error) {
    testResults.value = `用户注册测试失败:\n${error.message}`
  }
}

// 测试获取商品列表
const testProducts = async () => {
  try {
    const result = await getProducts({ page: 1, pageSize: 10 })
    testResults.value = `获取商品列表测试成功:\n${JSON.stringify(result, null, 2)}`
  } catch (error) {
    testResults.value = `获取商品列表测试失败:\n${error.message}`
  }
}

// 测试获取分类
const testCategories = async () => {
  try {
    const result = await getCategories()
    testResults.value = `获取分类测试成功:\n${JSON.stringify(result, null, 2)}`
  } catch (error) {
    testResults.value = `获取分类测试失败:\n${error.message}`
  }
}

// 测试获取轮播图
const testBanners = async () => {
  try {
    const result = await getBanners()
    testResults.value = `获取轮播图测试成功:\n${JSON.stringify(result, null, 2)}`
  } catch (error) {
    testResults.value = `获取轮播图测试失败:\n${error.message}`
  }
}

// 测试获取购物车
const testCart = async () => {
  try {
    const result = await getCart()
    testResults.value = `获取购物车测试成功:\n${JSON.stringify(result, null, 2)}`
  } catch (error) {
    testResults.value = `获取购物车测试失败:\n${error.message}`
  }
}

// 测试添加到购物车
const testAddToCart = async () => {
  try {
    const result = await addToCart({ productId: '123', quantity: 1 })
    testResults.value = `添加到购物车测试成功:\n${JSON.stringify(result, null, 2)}`
  } catch (error) {
    testResults.value = `添加到购物车测试失败:\n${error.message}`
  }
}

// 测试获取订单列表
const testOrders = async () => {
  try {
    // 这里需要导入订单相关的 API
    testResults.value = '订单接口测试: 需要先导入订单 API'
  } catch (error) {
    testResults.value = `订单接口测试失败:\n${error.message}`
  }
}

// 测试创建订单
const testCreateOrder = async () => {
  try {
    // 这里需要导入订单相关的 API
    testResults.value = '创建订单测试: 需要先导入订单 API'
  } catch (error) {
    testResults.value = `创建订单测试失败:\n${error.message}`
  }
}

// 测试搜索商品
const testSearch = async () => {
  try {
    // 这里需要导入搜索相关的 API
    testResults.value = '搜索商品测试: 需要先导入搜索 API'
  } catch (error) {
    testResults.value = `搜索商品测试失败:\n${error.message}`
  }
}

// 测试获取搜索关键词
const testSearchKeywords = async () => {
  try {
    // 这里需要导入搜索相关的 API
    testResults.value = '获取搜索关键词测试: 需要先导入搜索 API'
  } catch (error) {
    testResults.value = `获取搜索关键词测试失败:\n${error.message}`
  }
}
</script>

<style scoped>
.test-section {
  background: white;
  margin: 12px 0;
  padding: 16px;
  border-radius: 8px;
}

.test-section h3 {
  margin: 0 0 12px 0;
  color: #333;
  font-size: 16px;
}

.test-btn {
  background: #007aff;
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 4px 8px 4px 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.test-btn:hover {
  background: #0056b3;
}

.results-section {
  background: white;
  margin: 12px 0;
  padding: 16px;
  border-radius: 8px;
}

.result-display {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
}
</style>
